<!-- Gitee Auther 配置Popup  -->
<template>
  <div class="book-mark-panel">
    <div class="book-mark-panel-input row">
      <input id="token" v-model="gitInfo.token" type="text" placeholder="请输入token" @change="dataChange" />
    </div>
    <div class="book-mark-panel-input row">
      <input id="owner" v-model="gitInfo.owner" type="text" placeholder="Gitee账户名称" @change="dataChange" />
    </div>
    <div class="book-mark-panel-input row">
      <input id="repo" v-model="gitInfo.repo" type="text" placeholder="项目名称" @change="dataChange" />
    </div>
    <div class="book-mark-panel-input row">
      <input id="filePath" v-model="gitInfo.filePath" type="text" placeholder="请输入书签文件路径" @change="dataChange" />
    </div>
    <div class="book-mark-panel-btn row">
      <button class="btn" @click="saveBookmarks()">
        同步到Gitee
      </button>
      <button class="btn" id="getBookmarks" @click="getBookmark()">
        同步到Chrome
      </button>
    </div>
    <div class="book-mark-panel-tip">
      <div>说明:</div>
      <div>Gitee Token:【用户 -> 设置->私人令牌 -> 生成新令牌】</div>
      <div><a href="https://gitee.com/api/v5/swagger#/getV5ReposOwnerRepoStargazers?ex=no" target="_blank">Api地址</a></div>
      <div><a href="http://docs.getxhr.com/ChromeExtensionDocument/whats_new.html" target="_blank">Google Chrome Extensions</a></div>
    </div>
  </div>
</template>


<script setup>
import {onMounted, ref } from 'vue'
import {sendMessage,  getBookmarks,  mergeBookmarks,  importBookmarks,  removeBookmarks,} from "../utils/Chrome";
import { modifyFile, getFile } from "../utils/Gitee";
import { IndexedDB } from "../utils/indexDB";

const gitInfo=ref({
  token:"",
  owner:"",
  repo:"",
  filePath:""
})

const _indexedDB = new IndexedDB("gitInfoDb", "gitInfo")

const init=()=>{
  _indexedDB
      .createDatabase()
      .then(() => {
        console.log("Database created successfully or already exists");
        return _indexedDB.open();
      })
      .then(async () => {
        // 进行其他操作
        const res = (await _indexedDB.getById("data")) || gitInfo.value;
        gitInfo.value= res;
      })
      .catch((error) => {
        console.error("Failed to create or open database:", error);
      });
}


const dataChange=()=>{
  _indexedDB.update("data",gitInfo.value);
}

function sendData(){
  const params = {
        action: "hello",
        data: gitInfo.value.token,
      };
    sendMessage(params);
}

/**
 * 保存书签
 */
 async function saveBookmarks() {
  const bookmarkTreeNodes = await getBookmarks();
  // console.log("saveBookmarks ",bookmarkTreeNodes)
  modifyFile(gitInfo.value, bookmarkTreeNodes, true);
}

/**
 * 获取书签
 */
async function getBookmark() {
  // console.log(gitInfo.value)
  const res = await getFile(gitInfo.value);
  // console.log("Gitee Bookmark JSON ",res);
  const bookmarkTreeNodes = await getBookmarks();
  // console.log("Chrome Bookmark JSON : ",JSON.stringify(bookmarkTreeNodes));
  let newBookmark = mergeBookmarks(res, bookmarkTreeNodes);
  removeBookmarks(bookmarkTreeNodes);
  // console.log("newBookmark ",newBookmark);
  if(newBookmark && newBookmark.length >0 && newBookmark[0].children){
    importBookmarks([newBookmark[0].children[0]]);
  }
}

onMounted(init)


</script>

<style scoped>
.book-mark-panel {
  width: 200px;
  min-height: 300px;
}
.row {
  margin: 10px;
}

.btn {
  margin: 5px;
}

.book-mark-panel-tip {
  color: #056eef;
}

</style>
